<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示角色列表</title>
    <link rel="stylesheet" type="text/css" href="../../../resources/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../../resources/jquery-easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../../../resources/jquery-easyui/demo/demo.css">
    <link rel="stylesheet" type="text/css" href="../../../resources/login/css/demo.css">
    <!--<%&#45;&#45;<link rel="stylesheet" type="text/css" href="lib/jquery-easyui/demo.css">&#45;&#45;%>-->
    <script type="text/javascript" src="../../../resources/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../../resources/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../resources/admin/urlAdmin.js"></script>
</head>
<body>
<h1>角色列表</h1>
<table id="dg" data-options="rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true">
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="addUser">添加角色</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" id="editUser" >编辑角色</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="deleteUser">删除角色</a>
    </div>
    <div id="myDlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" id="myDlg-saveBtn">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" id="myDlg-closeBtn">取消</a>
    </div>
    <div id="myDlg" class="easyui-dialog" title="修改用户信息" style="width:400px;height:200px;padding:10px">
        <div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
        <form id="ff" method="post">
            <div>
                <label >角色名:</label>
                <input class="" type="text" id="name" name="name" data-options="required:true" />
                <input class="" type="hidden" id="id" name="id"/>
            </div>
        </form>
    </div>
</table>
<script>
    function show() {
//
        var data=[];
        $.ajax({
            type: "get",
            url: netpath+"/operator/selectRoles",
            timeout: 3000,
            success: function (result) {
                data=result.data;
                $('#dg').datagrid('loadData', data);
            },
            error: function (request) {
                alert(request.error)
            }});


        return data
    }
    function fLoadTable() {
        $('#dg').datagrid({
            title: '用户列表',
            width: 900,
            height: 500,
            buttons:'#toolbar',
            fitColumns: true,

//对应json数据中的每一列
            columns: [[ {
                field: 'id',
                width: '100',
                title: '角色id',
                align: 'center',
                checkbox:true
            },{
                field: 'name',
                title: '角色名称',
                width: '100',
                align: 'center',
            }
            ]],
            idField: 'id',
            loadMsg: 'Processing, please wait …',
            pagination: true
        });
    }
    $(document).ready(function(){
        fLoadTable();
        show();
        openDialog();
    })


    function openDialog(){
        //设置一个全局变量来控制弹出框关闭
        var bClose=false;
        //弹出框的属性设置
        $("#myDlg").dialog({
            modal: true,
            closable: true,
            closed: true,
            left: 150,
            top:50,
//            href: '/operator/getOneUserById?id=' + rowIndex,
            buttons:'#myDlg-buttons',
            onBeforeClose:function(){//关闭弹出框之前动作-弹出提示
                if (!bClose) {
                    bClose = true;//标记可以退出
                }
                return bClose;  //通过全局变量来控制是否关闭窗口
            }
        });
        //弹出框打开,修改用户
        $('#editUser').click(function(){
            //先设置为false;
            bClose=false;
            getID();
            $('#myDlg').dialog("open");
        });
        //弹出框打开，新增用户
        $('#addUser').click(function(){
            //先设置为false;
            bClose=false;
            $('#myDlg').dialog("open");

        });
//        删除角色
        $('#deleteUser').click(function () {
            var id=getID().id;
            $.messager.confirm("提醒", "确定删除?",function () {
                $.ajax({
                    type: "post",
                    url: netpath+"/role/deleteRoleById",
                    data:{
                        id:id
                    },
                    timeout: 3000,
                    success: function (result) {
                        $.messager.alert("提示信息",result.data,"info")
                        setTimeout(function(){
                            window.location.reload();
                        },1000)
                    },
                    error: function (request) {
                        alert(request.error)
                    }});

            });
        });


        //点击保存
        $('#myDlg-saveBtn').click(function(){

            $('#ff').form('submit',{
                url: netpath+"/role/addOrEditRole",
                method:"post",
                onSubmit: function (role) {
//
                },
                success: function (data) {
                    var dat = $.parseJSON(data);
                    if (dat.success) {
                        $.messager.alert("提示信息",dat.data,"info");
                        setTimeout(function(){
                            window.location.reload();
                        },1000)
                    }
                    else{
                        alert(dat.error)
                    }
                }
            });
            $('#myDlg').dialog("close",true);

        });

        //点击关闭
        $('#myDlg-closeBtn').click(function(){
            $('#myDlg').dialog("close");
        });

        //得到选中的 ID
        getID=function(){
            var row=$('#dg').datagrid('getSelected');
            $("#name").val(row.name);
//            $("#account").val(row.account);
            $("#id").val(row.id);
            return row;
    }}
</script>
</body>
</html>